<template>
<view class="process" :class="steps.length === 2 ? 'long': ''">
  <view v-for="(item, index) in steps" :key="item.step" class="step-item">
    <view class="step-info">
      <image v-if="active === item.step" class="dot" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/dot.png" />
      <image v-else class="number" :src="`https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/num-${item.step}.png`" />
      <view class="step-name">{{ item.name }}</view>
    </view>
    <view v-if="steps.length - 1 !== index" class="line"></view>
  </view>
</view>
</template>

<script>
export default {
  name: 'Process',
  props: {
    active: {
      type: Number,
      default: 0
    },
    steps: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.process {
  width: 580rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  &.long {
    width: 456rpx;
    .step-name {
      left: -10rpx;
    }
    .line {
      width: 302rpx;
      margin: 0 20rpx;
    }
  }
  .step-item {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .step-info {
    height: 32rpx;
    position: relative;
    display: flex;
    align-items: center;
  }
  .step-name {
    width: 80rpx;
    position: absolute;
    bottom: -40rpx;
    left: -18rpx;
    font-size: 20rpx;
    color: #8BACE7;
  }
  .dot {
    width: 38rpx;
    height: 38rpx;
  }
  .number {
    width: 32rpx;
    height: 32rpx;
    color: #ffffff;
  }
  .line {
    margin: 0 10rpx;
    width: 120rpx;
    height: 8rpx;
    background: rgba(255,255,255,0.07);
    border-radius: 6rpx;
  }
}
</style>
